<template>
  <div>
    <div>
      <el-row style="margin-bottom:10px">
        <el-col :span="8" >
          <h4 style="margin:0"> 
            <span>话题管理</span>
            <el-button  type="success" class="addBtn" @click="goEdit"><i class="el-icon-plus"></i>视频</el-button>
            <el-button  type="primary" class="addBtn" @click="sortBtn"><i class="el-icon-sort"></i>排序</el-button>
            
            <el-button v-if="tuijians.length>0" type="primary" class="addBtn" @click="editTui"><i class="el-icon-star-off"></i>推荐</el-button>          
          </h4>
        </el-col>
        <el-col :span="16" style="text-align:right">
          <el-select  v-model="value" placeholder="请选择" style="width:100px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input @input="sheachFun" style="width:300px" placeholder="输入搜索内容"></el-input>
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
      
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
       <el-table-column prop="name" label="发布时间" width="60"> </el-table-column>
        <el-table-column prop="name" label="封面" width="60"> </el-table-column>
        <el-table-column prop="address" label="标题"> </el-table-column>      
        <el-table-column prop="date" label="分类" > </el-table-column>      
        <el-table-column prop="date" label="发布者ID" width="100"> </el-table-column>      
        <el-table-column prop="" label="排序" width="50"> </el-table-column>      
        <el-table-column prop="" label="评论" width="50" > </el-table-column>      
        <el-table-column prop="" label="喜欢" width="60"> </el-table-column>      
        <el-table-column prop="" label="点击量" width="70">> </el-table-column>      
        <el-table-column prop="status" label="状态" width="50">
          <template slot-scope="scope">
            {{scope.row.status?'上线':'下线'}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button class="addBtn"> 置顶</el-button>
              <el-button class="addBtn" @click="edit(scope.row)"> 编辑</el-button>
              <el-button class="addBtn" @click="deletData(scope.row)"> 下线</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button  @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <sort-arrs :sortStatus="sortStatus" v-on:checkfun ="sorlCheckStatus"></sort-arrs>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </div>
 

  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  import sortArrs from './Articel/sort'
  export default {
    data() {
      return {
         currentPage4: 4,//分野
       
        dialogVisible:false,
        sortStatus:false,
        tuijians:'',
        value:'全部',
        options:[{
          value:0,
          label:'全部'
        },{
          value:1,
          label:'牙齿矫正'
        },{
          value:2,
          label:'口腔健康'
        },{
          value:3,
          label:'儿童口腔'
        },{
          value:4,
          label:'种植牙'
        }],
        tableData: [{
          date: '2016-05-02',
          name: 1,
          status:false,
          address: '上海市普陀区金沙江路 1518 弄',
          ohtml:'<p>我是内容sfdkdsgfdfdfdsf</p>'
        }, {
          date: '2016-05-04',
          status:true,
          name: 1,
          address: '上海市普陀区金沙江路 1517 弄',
          ohtml:'<p>我是内容sfdkdsgfdfdfdsf</p>'
          
        }]
      }
    },
    components:{
      sortArrs
    },
    methods: {
    ...mapActions(['eidtArticle']),      
      goEdit(){
        this.editStatus = true;
      },
      showlist(){
        this.editStatus = false
      },
      edit(val) {
        
        this.$store.commit('eidtArticle',val)
        this.$router.push('/Home/editor')
      },
      deletData(val) {
        
        
      },
      //选择 推荐
      handleSelectionChange(val) {
        this.tuijians = val;
      },
      editTui() {

      },
   
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
       //搜索
      sheachFun(val){
        
      },
      //排序
      sortBtn() {
        this.sortStatus = true
      },


      //分页
      handleSizeChange(val) {
        
      },
      handleCurrentChange(val) {
        
      },
      sorlCheckStatus(){
        this.sortStatus = false
      },
    }
  }
</script>
<style>

</style>
